<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/infographic') // echarts theme
import resize from './mixins/resize'
import { GetUserStage } from '@/api/api'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null,
      patientDistribution: []
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    async initChart() {
      this.chart = echarts.init(this.$el, 'infographic')
      const res = await GetUserStage()
      this.patientDistribution = res.data.rows
      this.chart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          left: 'center',
          bottom: '0',
          data: ['初筛', 'Session 1', 'Session 2', 'Session 3', 'Session 4', 'Session 5', 'Session 6']

        },
        series: [
          {
            name: '用户分布总览饼图',
            type: 'pie',
            roseType: 'radius',
            radius: [15, 95],
            center: ['50%', '38%'],

            labelLine: {
              length: 6
              // length2: 5
            },
            label: {
              fontSize: 12
            },
            data: [
              { value: this.patientDistribution[0]?.stageCount, name: '初筛' },
              { value: this.patientDistribution[1]?.stageCount, name: 'Session 1' },
              { value: this.patientDistribution[2]?.stageCount, name: 'Session 2' },
              { value: this.patientDistribution[3]?.stageCount, name: 'Session 3' },
              { value: this.patientDistribution[4]?.stageCount, name: 'Session 4' },
              { value: this.patientDistribution[5]?.stageCount, name: 'Session 5' },
              { value: this.patientDistribution[6]?.stageCount, name: 'Session 6' }
            ],
            animationEasing: 'cubicInOut',
            animationDuration: 1500
          }
        ]
      })
    }
  }
}
</script>
